<template>
  <div class="FirstPage-list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>系统首页</span>
      </div>

      <div class="dashboard-layout">
        <!-- 搜索条件区域 -->
        <el-form label-width="auto" class="search-form">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item>
                <el-date-picker
                  v-model="form.times"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :clearable="false"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-input placeholder="请输入学校、专业、班级" v-model="form.searchKey" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <el-button type="primary" @click="handleSearch" :loading="Loading">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 数据概览卡片区域 -->
        <DataOverview :overviewData="latest" />

        <!-- 三栏布局区域 -->
        <el-row :gutter="20" class="three-column-layout">
          <!-- 左侧：通行情况图表 -->
          <el-col :span="16">
            <el-card class="traffic-card">
              <div slot="header" class="clearfix">
                <span>通行情况</span>
              </div>
              <div class="traffic-box">
                <Bar1 ref="bar1" id="trafficSituationChart" />
              </div>
            </el-card>
          </el-col>
          <!-- 右侧：异常人数汇总 -->
          <el-col :span="8">
            <AbnormalPersonCount :personCount="latest" />
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment';
import DataOverview from './components/statisticsCards/DataOverview.vue';
import AbnormalPersonCount from './components/statisticsCards/AbnormalPersonCount.vue';
import Bar1 from './components/bar1.vue';

import { firstpagestatistics } from '@/api/comment/permission';

export default {
  components: {
    DataOverview,
    AbnormalPersonCount,
    Bar1
  },
  data() {
    return {
      form: {
        times: [moment().startOf('month').format('YYYY-MM-DD'), moment().endOf('month').format('YYYY-MM-DD')],
        searchKey: ''
      },

      //数据
      latest: {},
      Loading: false
    };
  },
  mounted() {
    this.loadDashboardData();
  },

  methods: {
    handleSearch() {
      this.loadDashboardData();
    },
    async loadDashboardData() {
      try {
        this.Loading = true;
        // 模拟数据加载，实际项目中应调用API
        const res = await firstpagestatistics(this.form);
        if (res.code === 200) {
          // 处理返回的数据
          this.$refs.bar1.setOption(res.data);
          this.latest = res.latest;
        }
        this.Loading = false;
      } catch (error) {
        console.error('加载数据失败:', error);
        this.Loading = false;
      } finally {
        this.Loading = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.FirstPage-list {
  height: 100%;
  overflow: hidden;
}

.box-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dashboard-layout {
  padding: 15px;
}

.search-form {
  margin-bottom: 20px;
}

.three-column-layout {
  margin-bottom: 20px;
}

.special-stat-section {
  height: 400px;
}

.traffic-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.traffic-box {
  width: 100%;
  height: 40.9vh;
}

.myEcharts {
  width: 100%;
  height: 100%;
}
</style>
